<!DOCTYPE html>
<html>

<head>
    <title>登录</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/common/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/common/css/mblogin.css" media="all">
    <script src="../assets/common/libs/jquery/jquery-3.2.1.min.js"></script>

    <style>
        body {
            background-image: url("../assets/common/images/bg_login2.png");
            background-position: center 110px;
            background-repeat: no-repeat;
            background-size: 100%;
            background-color: #f0f2f5;
        }


        .login-header {
            color: rgba(0, 0, 0, .85) !important;
        }

        .login-footer {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a:hover {
            color: rgba(0, 0, 0, 0.4) !important;
        }
    </style>
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
</head>

<body>
<div class="login-wrapper">

   
    <div class=" login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
                <a style="color:#2f97f0;padding-left: 120px;" href="login.html">账号密码登录</a>
            </div>
            <div class="layui-card-body layui-form layui-form-pane" lay-filter="loginForm">
                <div class="layui-form-item">

                    <div >
                        <input style="border-radius:5px;padding-left: 20px" name="phone" id="phone"  placeholder="请输入11位手机号码" type="text" lay-verify="required" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div >
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input style="border-radius:5px;padding-left: 20px" name="code" id="code" type="text" lay-verify="required" placeholder="请输入短信验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <input type="button" id="send" value="获取验证码" class="layui-btn layui-btn-fluid" onclick="sendCode()" />
                            </div>

                        </div>
                    </div>
                </div>
              
                <div class="layui-form-item">
                    <a href="javascript:;" class="layui-link">帐号注册</a>
                    <a href="javascript:;" class="layui-link pull-right">忘记密码？</a>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" id="submit">登 录</button>
                </div>

            </div>
        </div>
    </div>

  
</div>

<script>

    $(document).ready(function() {

    $("#submit").click(function() {
        $.post("/user/mbLogin", {
            phone: $("#phone").val(),
            code: $("#code").val()
        }, function (result) {
            if (result.success) {
                window.location.href = "/pages/main.html";

            } else {
                alert(result.errorInfo);
            }
        });
    });

        // 图形验证码(加入时间戳解决浏览器缓存问题)
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });

    });

    var count=10;
    function sendtime() {
        var obj = document.getElementById("send");
        if(count>0) {
            $("#send").attr("disabled", "disabled");
            $("#send").val(count + "秒后再次获取");
            obj.style.backgroundColor= "#ccc";
            count = count - 1;
            setTimeout(function () {
                sendtime();
            }, 1000);
        }else {
            $("#send").removeAttr("disabled");
            $("#send").val("获验证码");
            obj.style.backgroundColor= "#009688";
            count=10;//这里要重置一下，不然再次点击是没有反应的。
        }
    }


    function sendCode() {
        $.post("/user/sendCode", {
            phone: $("#phone").val()
        }, function (result) {
            if (result.flag ==true) {
                sendtime();

            } else {
               alert(发送失败);
            }
        });

    }

</script>



</body>
</html>